


Newspaper Article

by lordvoldemortsskin (lordvoldemortsnipple)



Series: Works Skins [2]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Journalism, Newspapers, ao3 skin
Language: English
Status: Completed
Published: 2020-05-24
Updated: 2020-05-24
Packaged: 2021-03-02 23:08:18
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 536
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24354808
Author URL: https://archiveofourown.org/users/lordvoldemortsnipple/pseuds/lordvoldemortsskin
Summary: Newspaper work skin with responsive columns so it works on desktop AND mobile baby!
Series: Works Skins [2]
Series URL: https://archiveofourown.org/series/1796734
Comments: 3
Kudos: 11





	Newspaper Article

Let's start with a preview of the work skin, you can play with the browser size to see how it reacts:

The Daily Journal

Florida Man Bites Crocodile

"Super tasty!" he claims "kinda chewy though"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula enim, sollicitudin nec commodo feugiat, mollis vel metus. Curabitur ornare erat nec blandit pulvinar. Pellentesque in molestie quam. Quisque auctor erat sed velit hendrerit elementum. Morbi est risus, vestibulum in enim in, suscipit dictum nisi. Pellentesque faucibus facilisis urna, hendrerit varius lacus ultricies at. Donec a libero accumsan, mollis quam eu, luctus ligula. Vestibulum pretium elit magna, quis finibus justo tempus ut. Vivamus bibendum nibh vel tortor tincidunt blandit at porta felis. Vestibulum nec cursus ligula.

Nulla facilisi. Proin eu consequat orci. Nam ac magna viverra, interdum justo ut, tincidunt elit. Ut eu efficitur metus. Sed ultrices aliquam magna, ut sagittis nunc. Nulla at ornare neque. Mauris imperdiet ut purus eu convallis. Maecenas sit amet placerat libero, ac efficitur erat. Suspendisse potenti. Aliquam in rutrum odio. Cras metus orci, efficitur at hendrerit id, accumsan quis est. In ornare, urna ut mollis pretium, sem dui condimentum massa, et dictum lorem lectus in odio. Donec eleifend faucibus metus, quis viverra tellus varius sit amet. In a luctus felis.

Vivamus vestibulum arcu id lectus gravida volutpat. Donec convallis eros vel nulla molestie pulvinar. Praesent luctus faucibus dui, ut tincidunt urna accumsan sit amet. Vestibulum malesuada placerat massa. Nunc viverra aliquet bibendum. Vestibulum nisi diam, vulputate non interdum in, placerat vitae erat. Suspendisse eget egestas turpis.

* * *

Now here's the css you have to put in the work skin you're creating:

> 
>     #workskin .box {
>       max-width: 80%;
>       margin-left: auto;
>       margin-right: auto;
>       margin-bottom: 1.25em;
>     }
>     
>     #workskin .papername {
>       text-transform: uppercase;
>       font-size: 2.188em;
>       text-align: center;
>       font-family: Georgia, serif;
>       font-weight: bold;
>       line-height: 90%;
>       margin-bottom: 0.938em;
>     }
>     
>     #workskin .atitle {
>       font-size: 2.5em;
>       font-weight: bold;
>       text-transform: uppercase;
>       text-align: center;
>       font-family: Impact, Charcoal, sans-serif;
>       line-height: 90%;
>       margin-top: -0.3em;
>     }
>     
>     #workskin .subtitle {
>       font-size: 0.938em;
>       color: #4f4f4f;
>       margin-top: -2.813em;
>       text-transform: uppercase;
>       text-align: center;
>       font-weight: bold;
>     }
>     
>     #workskin .article {
>       -webkit-columns: 3 150px;
>       column-gap: 2.5em;
>       column-rule: 0.063em solid #c3c3c3;
>       font-size: 12px;
>       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
>       max-width: 700px;
>       margin-left: auto;
>       margin-right: auto;
>     }

A lot of what's here is up to personal taste and can easily be changed into other colors, fonts and sizes.

The article section has the column settings:   
**-webkit-columns** is defining the maximum number of columns (3) and the minimum width of those columns (150px)  
**column-gap** defines the space between each column (2.5em)  
**column-rule** defines the thickness of the vertical border (0.063em), its pattern (solid) and its color (#c3c3c3)

And now how you'll be writing the html to incorporate it in the text:

> <div class="box"> _< \- here you're setting the box where the article will be in, good to define the width and alignment_
> 
> <p class="papername">The Daily Journal</p> _< \- the newspaper name_
> 
> <p class="atitle">Florida Man Bites Crocodile</p> _< \- the title_
> 
> <p class="subtitle">"Super tasty!" he claims "kinda chewy though"</p> _< \- subtitle _  
>  <div class="article"> _< \- div class to allow the columns, and then text_  
>  <p>Lorem ipsum dolor sit amet...</p>
> 
> </div></div> _< -don't forget to close the two divs (box and article) after your text!_


End file.
